import React, { Component } from "react";
import { Button } from "antd";
import { Route } from "react-router-dom";
import { Link } from "react-router-dom";
import Z1 from "./compontens/z1";
import Z2 from "./compontens/z2";
import qs from "query-string";

let obj = {
  color: "red",
  name: "红",
};
export default class T1 extends Component {
  handleChange = (z) => {
    this.props.history.push({
      pathname: `/testRouter/t1/${z}`,

      // 刷新后会清空
      //   state: {
      //     color: "red",
      //   },

      //刷新后数据不会清空
      search: qs.stringify(obj),
    });
  };
  render() {
    return (
      <div>
        <Link to="/testRouter/t2/123">访问详情</Link>
        <div>
          <Button
            type="primary"
            onClick={() => {
              this.handleChange("z1");
            }}
          >
            页面1
          </Button>
          <Button
            type="primary"
            onClick={() => {
              this.handleChange("z2");
            }}
          >
            页面2
          </Button>
          <Route path="/testRouter/t1/z1" component={Z1}></Route>
          <Route path="/testRouter/t1/z2" component={Z2}></Route>
        </div>
      </div>
    );
  }
}
